<template>
  <div class="food-admin">
    <header>
      <i class="fa fa-angle-left" @click="back"></i>
      <p>食品管理</p>
      <!-- 可以添加更多头部内容 -->
    </header>

    <div class="food-list">
      <div class="food-item" v-for="food in foodList" :key="food.foodId">
        <img :src="food.foodImg" alt="Food Image" />
        <div>
          <h3>{{ food.foodName }}</h3>
          <p>{{ food.foodExplain }}</p>
          <p>￥{{ food.foodPrice }}</p>
          <button @click="editFood(food.foodId)">编辑</button>
          <button @click="removeFood(food.foodId)">删除</button>
        </div>
      </div>
      <button @click="addFood">添加食品</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FoodAdmin',
  data() {
    return {
	  currentFood: null, // 用于存储当前选中的食品信息
      foodList: [],
      businessId: this.$route.query.businessId,
    };
  },
  created() {
	this.business = this.$getSessionStorage('business');
	this.businessId = this.business.businessId;
    this.loadFoodList();
  },
  methods: {
    back() {
      this.$router.push('/my');
    },
      addFood() {
              // 添加食品
              this.$router.push({
                  path: `/add-food?businessId=${this.businessId}`
              });
          },
          editFood(foodId) {
              // 发送请求获取食品详情
              this.foodId = foodId;
              let url=`FoodController/getFoodById/${this.foodId}/${this.businessId}`;
              this.$axios.get(url)
                .then(response => {
                  this.currentFood = response.data.result; // 存储食品信息
                  this.$router.push({ name: 'EditFood', params: { foodId: this.foodId } });

                })
                .catch(error => {
                  console.error('获取食品详情失败:', error);
                  alert('获取食品信息失败');
                });
            },
    removeFood(foodId) {
      if (confirm('确定删除这个食品吗？')) {
        this.foodId = foodId;
		  let delurl=`FoodController/remove/${this.businessId}/${this.foodId}`;
        this.$axios.delete(delurl).then(() => {
          this.loadFoodList(); // 重新加载食品列表
        }).catch(error => {
          console.error('删除食品失败:', error);
        });
		let deluurl=`FoodController/remove/${this.businessId}/${this.foodId}`;
		this.$axios.delete(deluurl).then(() => {
		  this.loadFoodList(); // 重新加载食品列表
		}).catch(error => {
		  console.error('删除食品失败:', error);
		});
		
      }
    },
    loadFoodList() {
      if (this.businessId) {
		  let url=`FoodController/listFoodByBusinessId/${this.businessId}`;
        this.$axios.get(url)
        .then(response => {
          this.foodList = response.data.result;
        }).catch(error => {
          console.error('加载食品列表失败:', error);
        });
      } else {
        console.error('业务 ID 未定义');
      }
    }
  },
};
</script>

<style scoped>
.food-admin {
  padding: 20px;
  background-color: #F4F8Fb; /* 背景颜色 */
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #01B0F2; /* 头部背景颜色 */
  color: #fff; /* 文字颜色 */
}
header i {
  font-size: 1.5em; /* 图标大小 */
  cursor: pointer; /* 鼠标样式 */
}
.food-list {
  display: flex;
  flex-direction: column;
}
.food-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff; /* 食品项背景颜色 */
  border-radius: 5px; /* 圆角 */
}
.food-item img {
  width: 100px; /* 图片宽度 */
  height: 100px; /* 图片高度 */
  margin-right: 20px; /* 图片右边距 */
}
button {
  margin-right: 10px; /* 按钮右边距 */
  cursor: pointer; /* 鼠标样式 */
}
</style>